@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $resizerId: "[data-cms-tool='cms-element-resizer']"; $resizeActive: '[data-cms-element-resizer="true"]'; [data-div-type="element"] { &[data-element-type="bundle"] { // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important; // width: var(--_sf-con-nw-wh);--_ctm-ele-nw-wh-vl // width: var( // --_sf-mob-el-wh-st-mx, // var( // --_sf-tab-el-wh-st-mx, // var( // --_sf-el-wh-st-mx, // calc( // 1% * // var( // --_ctm-mob-bun-ele-nw-wh-vl, // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh))) // ) // ) // ) // ) // ); width: var( --_sf-el-wh-st-mx, calc( 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl))) ) ); &[data-view-state="full"] { height: auto; } // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))); // --_aspect-ratio: calc( // 1 * // ( // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) / // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh)))) // ) // ); &[data-view-state="full"] { & > .wrapper { & > div { height: 100%; } } } // height: auto; // margin: var( // --_ctm-mob-bun-lt-mn, // var( // --_ctm-tab-bun-lt-mn, // var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)))) // ) // ); // &:not(:has(#{$resizerId}#{$resizeActive})) { // min-height: 100px !important; // } & > div { &.wrapper { width: 100%; // grid-template-rows: max(var(--_ctm-bun-lt-ht), auto) !important; } } .bundle__element__container { background-color: var( --_ctm-mob-dn-wt-se-bd-cr, var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-wt-se-br-cr, var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)) ); border-style: var( --_ctm-mob-dn-wt-se-br-se, var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)) ); border-width: var( --_ctm-mob-dn-wt-se-br-wh, var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-wt-se-br-rs, var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)) ); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))) ); padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); display: flex; flex-direction: column; // height: 100%; .bundle__tabs { width: 100%; background-color: var( --_ctm-mob-dn-be-ts-wt-se-bd-cr, var(--_ctm-tab-dn-be-ts-wt-se-bd-cr, var(--_ctm-dn-be-ts-wt-se-bd-cr)) ); // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); display: flex; flex-direction: column; --_sf-gp: var( --_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)) ); --_sf-cd-gp: calc(var(--_sf-gp) * 0.5); row-gap: var(--_sf-gp); width: 100%; // height: 100%; border-color: var( --_ctm-mob-dn-be-ts-wt-se-br-cr, var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr)) ); border-style: var( --_ctm-mob-dn-be-ts-wt-se-br-se, var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se)) ); border-width: var( --_ctm-mob-dn-be-ts-wt-se-br-wh, var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-be-ts-wt-se-br-rs, var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-be-ts-wt-se-sw-ae, var(--_ctm-tab-dn-be-ts-wt-se-sw-ae, var(--_ctm-dn-be-ts-wt-se-sw-ae)) ) var( --_ctm-mob-dn-be-ts-wt-se-sw-br, var(--_ctm-tab-dn-be-ts-wt-se-sw-br, var(--_ctm-dn-be-ts-wt-se-sw-br)) ) var( --_ctm-mob-dn-be-ts-wt-se-sw-sd, var(--_ctm-tab-dn-be-ts-wt-se-sw-sd, var(--_ctm-dn-be-ts-wt-se-sw-sd)) ) var( --_ctm-mob-dn-be-ts-wt-se-sw-cr, var(--_ctm-tab-dn-be-ts-wt-se-sw-cr, var(--_ctm-dn-be-ts-wt-se-sw-cr)) ) ); .profile__button { &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-me-hr-se-bd-cr, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-br-cr)) ); --_sf-hr-br-se: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-dn-be-ts-be-tb-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-br-wh)) ); --_sf-hr-br-rs: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-dn-be-ts-be-tb-hr-se-br-rs)) ); --_sf-hr-at: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-at, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-at, var(--_ctm-dn-be-ts-be-tb-hr-se-at)) ); --_sf-hr-in-ad-tt-sg: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-in-ad-tt-sg, var( --_ctm-tab-dn-be-ts-be-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-in-ad-tt-sg) ) ); // for shadow --_sf-hr-sw-ae: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-ae)) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-br)) ); --_sf-hr-sw-hr: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-hr)) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-cr)) ); // for font --_sf-hr-cr: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-cr)) ); --_sf-hr-ft-fy: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy)) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-tm, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-tm)) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-wd-wp, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-wp)) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-wd-bk, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-bk)) ); --_sf-hr-ft-se: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se)) ); --_sf-hr-ft-wt: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-wt)) ); --_sf-hr-ft-se-ic: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se-ic, var( --_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se-ic, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se-ic) ) ); --_sf-hr-tt-an: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-an)) ); --_sf-hr-lr-sg: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-lr-sg)) ); --_sf-hr-le-ht: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-dn-be-ts-be-tb-hr-se-le-ht)) ); --_sf-hr-in-se: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se)) ); --_sf-hr-in-se: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se)) ); --_sf-hr-in-c1: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-dn-be-ts-be-tb-hr-se-in-c1)) ); --_sf-hr-ue: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-dn-be-ts-be-tb-hr-se-ue)) ); // for pading and width --_sf-hr-pg: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-dn-be-ts-be-tb-hr-se-pg)) ); --_sf-hr-wh: var( --_ctm-mob-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-wh)) ); &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at)); gap: var( --_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg) ); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs) ); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh) ); } // text styles color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)); text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); [data-element-style="Text"] { display: inline-block; width: 100%; } &[data-is-selected="true"] { --_sf-sd-bd-cr: var( --_ctm-mob-dn-me-sd-se-bd-cr, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr)) ); --_sf-sd-br-cr: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr)) ); --_sf-sd-br-se: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se)) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh)) ); --_sf-sd-br-rs: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs)) ); --_sf-sd-at: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-at, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at)) ); --_sf-sd-in-ad-tt-sg: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg, var( --_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg) ) ); // for shadow --_sf-sd-sw-ae: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae)) ); --_sf-sd-sw-br: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br)) ); --_sf-sd-sw-hr: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr)) ); --_sf-sd-sw-cr: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr)) ); // for font --_sf-sd-cr: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr)) ); --_sf-sd-ft-fy: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy)) ); --_sf-sd-tt-tm: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-tm, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-tm)) ); --_sf-sd-wd-wp: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-wd-wp, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-wp)) ); --_sf-sd-wd-bk: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-wd-bk, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-bk)) ); --_sf-sd-ft-se: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se)) ); --_sf-sd-ft-wt: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt)) ); --_sf-sd-ft-se-ic: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic, var( --_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic) ) ); --_sf-sd-tt-an: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an)) ); --_sf-sd-lr-sg: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg)) ); --_sf-sd-le-ht: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht)) ); --_sf-sd-in-se: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se)) ); --_sf-sd-in-se: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se)) ); --_sf-sd-in-c1: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1)) ); --_sf-sd-ue: var( --_ctm-mob-dn-be-ts-be-tb-hr-ue, var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue)) ); // for pading and width --_sf-sd-pg: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg)) ); --_sf-sd-wh: var( --_ctm-mob-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh)) ); &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } background-color: var( --_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr) ); padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at)); gap: var( --_sf-sd-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg) ); border-radius: var( --_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs) ); box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var( --_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh) ); } // text styles color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr)); font-family: var( --_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy) ); text-transform: var( --_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm) ); word-wrap: var( --_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp) ); word-break: var( --_sf-sd-wd-bk, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se)); font-weight: var( --_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt) ); font-style: var( --_sf-sd-ft-se-ic, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic) ); text-align: var( --_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an) ); letter-spacing: var( --_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg) ); line-height: var( --_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht) ); text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); [data-element-style="Text"] { display: inline-block; width: 100%; } } } .embla { height: auto; .embla__viewport { .embla__container { display: flex; gap: prepareMediaVariable(--_ctm-dn-be-ts-wt-se-im-gp); .embla__slide { width: unset; } } } } } .category__tabs { width: 100%; background-color: var( --_ctm-mob-dn-cy-ts-wt-se-bd-cr, var(--_ctm-tab-dn-cy-ts-wt-se-bd-cr, var(--_ctm-dn-cy-ts-wt-se-bd-cr)) ); // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); display: flex; flex-direction: column; --_sf-gp: var( --_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)) ); --_sf-cd-gp: calc(var(--_sf-gp) * 0.5); row-gap: var(--_sf-gp); width: 100%; // height: 100%; border-color: var( --_ctm-mob-dn-cy-ts-wt-se-br-cr, var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr)) ); border-style: var( --_ctm-mob-dn-cy-ts-wt-se-br-se, var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se)) ); border-width: var( --_ctm-mob-dn-cy-ts-wt-se-br-wh, var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-cy-ts-wt-se-br-rs, var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-cy-ts-wt-se-sw-ae, var(--_ctm-tab-dn-cy-ts-wt-se-sw-ae, var(--_ctm-dn-cy-ts-wt-se-sw-ae)) ) var( --_ctm-mob-dn-cy-ts-wt-se-sw-br, var(--_ctm-tab-dn-cy-ts-wt-se-sw-br, var(--_ctm-dn-cy-ts-wt-se-sw-br)) ) var( --_ctm-mob-dn-cy-ts-wt-se-sw-sd, var(--_ctm-tab-dn-cy-ts-wt-se-sw-sd, var(--_ctm-dn-cy-ts-wt-se-sw-sd)) ) var( --_ctm-mob-dn-cy-ts-wt-se-sw-cr, var(--_ctm-tab-dn-cy-ts-wt-se-sw-cr, var(--_ctm-dn-cy-ts-wt-se-sw-cr)) ) ); .profile__button { &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-me-hr-se-bd-cr, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr)) ); --_sf-hr-br-cr: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-cr)) ); --_sf-hr-br-se: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-se)) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-wh)) ); --_sf-hr-br-rs: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-rs)) ); --_sf-hr-at: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-dn-cy-ts-cy-tb-hr-se-at)) ); --_sf-hr-in-ad-tt-sg: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg, var( --_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg) ) ); // for shadow --_sf-hr-sw-ae: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-ae)) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-br)) ); --_sf-hr-sw-hr: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-hr)) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-cr)) ); // for font --_sf-hr-cr: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-cr)) ); --_sf-hr-ft-fy: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy)) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-tm, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-tm)) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-wp, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-wp)) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-bk, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-bk)) ); --_sf-hr-ft-se: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se)) ); --_sf-hr-ft-wt: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-wt)) ); --_sf-hr-ft-se-ic: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se-ic, var( --_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se-ic, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se-ic) ) ); --_sf-hr-tt-an: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-an)) ); --_sf-hr-lr-sg: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-lr-sg)) ); --_sf-hr-le-ht: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-hr-se-le-ht)) ); --_sf-hr-in-se: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se)) ); --_sf-hr-in-se: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se)) ); --_sf-hr-in-c1: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-c1)) ); --_sf-hr-ue: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ue)) ); // for pading and width --_sf-hr-pg: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-pg)) ); --_sf-hr-wh: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wh)) ); &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at)); gap: var( --_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg) ); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs) ); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh) ); } // text styles color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)); text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt)); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic) ); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an)); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg) ); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); [data-element-style="Text"] { display: inline-block; width: 100%; } &[data-is-selected="true"] { --_sf-sd-bd-cr: var( --_ctm-mob-dn-me-sd-se-bd-cr, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr)) ); --_sf-sd-br-cr: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr)) ); --_sf-sd-br-se: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se)) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh)) ); --_sf-sd-br-rs: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs)) ); --_sf-sd-at: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at)) ); --_sf-sd-in-ad-tt-sg: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg, var( --_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg) ) ); // for shadow --_sf-sd-sw-ae: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae)) ); --_sf-sd-sw-br: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br)) ); --_sf-sd-sw-hr: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr)) ); --_sf-sd-sw-cr: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr)) ); // for font --_sf-sd-cr: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr)) ); --_sf-sd-ft-fy: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy)) ); --_sf-sd-tt-tm: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-tm, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-tm)) ); --_sf-sd-wd-wp: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-wp, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-wp)) ); --_sf-sd-wd-bk: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-bk, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-bk)) ); --_sf-sd-ft-se: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se)) ); --_sf-sd-ft-wt: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt)) ); --_sf-sd-ft-se-ic: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic, var( --_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic) ) ); --_sf-sd-tt-an: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an)) ); --_sf-sd-lr-sg: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg)) ); --_sf-sd-le-ht: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht)) ); --_sf-sd-in-se: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se)) ); --_sf-sd-in-se: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se)) ); --_sf-sd-in-c1: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1)) ); --_sf-sd-ue: var( --_ctm-mob-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue)) ); // for pading and width --_sf-sd-pg: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg)) ); --_sf-sd-wh: var( --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh)) ); &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } background-color: var( --_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr) ); padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at)); gap: var( --_sf-sd-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg) ); border-radius: var( --_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs) ); box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var( --_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh) ); } // text styles color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr)); font-family: var( --_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy) ); text-transform: var( --_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm) ); word-wrap: var( --_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp) ); word-break: var( --_sf-sd-wd-bk, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se)); font-weight: var( --_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt) ); font-style: var( --_sf-sd-ft-se-ic, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic) ); text-align: var( --_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an) ); letter-spacing: var( --_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg) ); line-height: var( --_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht) ); text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); [data-element-style="Text"] { display: inline-block; width: 100%; } } } .embla { height: auto; .embla__viewport { .embla__container { display: flex; gap: prepareMediaVariable(--_ctm-dn-cy-ts-wt-se-im-gp); .embla__slide { width: unset; } } } } } .single__bundle_container { display: flex; flex-direction: column; gap: 16px; height: 100%; .bundle__header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; .bundle__title { font-family: var(--_ctm-dn-hg-dn-ft-fy); text-transform: var(--_ctm-dn-hg-dn-tt-tm); word-wrap: var(--_ctm-dn-hg-dn-wd-wp); word-break: var(--_ctm-dn-hg-dn-wd-bk); font-size: var(--_ctm-dn-hg-dn-ft-se); color: var(--_ctm-dn-hg-dn-cr); font-weight: var(--_ctm-dn-hg-dn-ft-wt); font-style: var(--_ctm-dn-hg-dn-ft-se-ic); text-decoration: var(--_ctm-dn-hg-dn-ue); text-align: var(--_ctm-dn-hg-dn-tt-an); letter-spacing: var(--_ctm-dn-hg-dn-lr-sg); line-height: var(--_ctm-dn-hg-dn-le-ht); background-color: var(--_ctm-dn-hg-dn-bd-cr); border-width: var(--_ctm-dn-hg-dn-br-wh); border-color: var(--_ctm-dn-hg-dn-br-cr); border-style: var(--_ctm-dn-hg-dn-br-se); border-radius: var(--_ctm-dn-hg-dn-br-rs); box-shadow: var(--_ctm-dn-hg-dn-sw-ae) var(--_ctm-dn-hg-dn-sw-br) var(--_ctm-dn-hg-dn-sw-sd) var(--_ctm-dn-hg-dn-sw-cr); } .bundle__description { font-family: var(--_ctm-dn-dn-dn-ft-fy); text-transform: var(--_ctm-dn-dn-dn-tt-tm); word-wrap: var(--_ctm-dn-dn-dn-wd-wp); word-break: var(--_ctm-dn-dn-dn-wd-bk); font-size: var(--_ctm-dn-dn-dn-ft-se); color: var(--_ctm-dn-dn-dn-cr); font-weight: var(--_ctm-dn-dn-dn-ft-wt); font-style: var(--_ctm-dn-dn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-dn-dn-ue); text-align: var(--_ctm-dn-dn-dn-tt-an); letter-spacing: var(--_ctm-dn-dn-dn-lr-sg); line-height: var(--_ctm-dn-dn-dn-le-ht); background-color: var(--_ctm-dn-dn-dn-bd-cr); border-width: var(--_ctm-dn-dn-dn-br-wh); border-color: var(--_ctm-dn-dn-dn-br-cr); border-style: var(--_ctm-dn-dn-dn-br-se); border-radius: var(--_ctm-dn-dn-dn-br-rs); box-shadow: var(--_ctm-dn-dn-dn-sw-ae) var(--_ctm-dn-dn-dn-sw-br) var(--_ctm-dn-dn-dn-sw-sd) var(--_ctm-dn-dn-dn-sw-cr); } .button__items { display: flex; align-items: center; .bundle_detail_btn { display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-ds-pe-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-ds-pe-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-ds-pe-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-ds-pe-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-ds-pe-bn-dn-ft-se); color: var(--_ctm-dn-be-ds-pe-bn-dn-cr); font-weight: var(--_ctm-dn-be-ds-pe-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-ds-pe-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-ds-pe-bn-dn-ue); text-align: var(--_ctm-dn-be-ds-pe-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-ds-pe-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-ds-pe-bn-dn-le-ht); background-color: var(--_ctm-dn-be-ds-pe-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-ds-pe-bn-dn-br-wh); border-color: var(--_ctm-dn-be-ds-pe-bn-dn-br-cr); border-style: var(--_ctm-dn-be-ds-pe-bn-dn-br-se); border-radius: var(--_ctm-dn-be-ds-pe-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-ds-pe-bn-dn-sw-ae) var(--_ctm-dn-be-ds-pe-bn-dn-sw-br) var(--_ctm-dn-be-ds-pe-bn-dn-sw-sd) var(--_ctm-dn-be-ds-pe-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-ds-pe-bn-dn-in-se); height: var(--_ctm-dn-be-ds-pe-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-ds-pe-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-se-wh, 1.25); } } } } } } .single__bundle_slider { display: flex; flex-direction: column; gap: var(--_ctm-lt-im-gp); align-items: flex-start; height: 100%; & > div { height: 100%; } .bundle-image-container { height: 100%; background-color: var(--_ctm-dn-pt-cd-dn-bd-cr); border-width: var(--_ctm-dn-pt-cd-dn-br-wh); border-style: var(--_ctm-dn-pt-cd-dn-br-se); border-color: var(--_ctm-dn-pt-cd-dn-br-cr); border-radius: var(--_ctm-dn-pt-cd-dn-br-rs); box-shadow: var(--_ctm-dn-pt-cd-dn-sw-ae) var(--_ctm-dn-pt-cd-dn-sw-br) var(--_ctm-dn-pt-cd-dn-sw-sd) var(--_ctm-dn-pt-cd-dn-sw-cr); width: 100%; display: flex; flex-direction: column; gap: var(--_ctm-lt-ig-tt-sg); .showcase-img { flex-grow: 1; padding: 16px; align-items: center; justify-content: center; display: flex; img { max-width: 100%; max-height: 100%; height: 100%; width: 100%; object-fit: cover; } } .img-title { padding: 12px; font-family: var(--_ctm-dn-pt-ne-dn-ft-fy); text-transform: var(--_ctm-dn-pt-ne-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-ne-dn-wd-wp); word-break: var(--_ctm-dn-pt-ne-dn-wd-bk); font-size: var(--_ctm-dn-pt-ne-dn-ft-se); color: var(--_ctm-dn-pt-ne-dn-cr); font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt); font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic); text-decoration: var(--_ctm-dn-pt-ne-dn-ue); text-align: var(--_ctm-dn-pt-ne-dn-tt-an); letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg); line-height: var(--_ctm-dn-pt-ne-dn-le-ht); background-color: var(--_ctm-dn-pt-ne-dn-bd-cr); border-width: var(--_ctm-dn-pt-ne-dn-br-wh); border-color: var(--_ctm-dn-pt-ne-dn-br-cr); border-style: var(--_ctm-dn-pt-ne-dn-br-se); border-radius: var(--_ctm-dn-pt-ne-dn-br-rs); box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br) var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr); } } .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } a { width: 100%; display: flex; align-items: center; .bundle_navigation_button { display: flex; width: 100%; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } } } .single__bundle__category_slider { display: flex; flex-direction: column; gap: 16px; .category_bundle_wrapper { display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%; padding: 16px; gap: var(--_ctm-lt-ig-tt-sg); background-color: var(--_ctm-dn-te-cd-dn-bd-cr); border-width: var(--_ctm-dn-te-cd-dn-br-wh); border-style: var(--_ctm-dn-te-cd-dn-br-se); border-color: var(--_ctm-dn-te-cd-dn-br-cr); border-radius: var(--_ctm-dn-te-cd-dn-br-rs); box-shadow: var(--_ctm-dn-te-cd-dn-sw-ae) var(--_ctm-dn-te-cd-dn-sw-br) var(--_ctm-dn-te-cd-dn-sw-sd) var(--_ctm-dn-te-cd-dn-sw-cr); .category_bundle_heading_wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; .category_bundle_name { display: flex; align-items: flex-start; justify-content: flex-start; font-family: var(--_ctm-dn-pt-ne-dn-ft-fy); text-transform: var(--_ctm-dn-pt-ne-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-ne-dn-wd-wp); word-break: var(--_ctm-dn-pt-ne-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-pt-ne-dn-ft-se); color: var(--_ctm-dn-pt-ne-dn-cr); font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt); font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic); text-decoration: var(--_ctm-dn-pt-ne-dn-ue); text-align: var(--_ctm-dn-pt-ne-dn-tt-an); letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg); line-height: var(--_ctm-dn-pt-ne-dn-le-ht); background-color: var(--_ctm-dn-pt-ne-dn-bd-cr); border-width: var(--_ctm-dn-pt-ne-dn-br-wh); border-color: var(--_ctm-dn-pt-ne-dn-br-cr); border-style: var(--_ctm-dn-pt-ne-dn-br-se); border-radius: var(--_ctm-dn-pt-ne-dn-br-rs); box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br) var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr); } } .category-tile-content { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; width: 100%; .category-tile { display: grid; row-gap: var(--_ctm-lt-te-rw-gp); column-gap: var(--_ctm-lt-te-cn-gp); padding: 10px; box-sizing: border-box; height: 100%; .category-product-image-wrapper { width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: var(--_ctm-dn-te-cd-ie-dn-bd-cr); border-width: var(--_ctm-dn-te-cd-ie-dn-br-wh); border-color: var(--_ctm-dn-te-cd-ie-dn-br-cr); border-style: var(--_ctm-dn-te-cd-ie-dn-br-se); border-radius: var(--_ctm-dn-te-cd-ie-dn-br-rs); box-shadow: var(--_ctm-dn-te-cd-ie-dn-sw-ae) var(--_ctm-dn-te-cd-ie-dn-sw-br) var(--_ctm-dn-te-cd-ie-dn-sw-sd) var(--_ctm-dn-te-cd-ie-dn-sw-cr); img { max-height: 135px; } } &.images-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } &.images-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } &.images-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; .product-image-wrapper:last-child { grid-column: 1 / -1; // span both columns } } &.images-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } } } .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } a { width: 100; display: flex; align-items: center; .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } } } } .single__bundle_vertical_scroll_wrapper { display: flex; flex-direction: column; gap: var(--_ctm-lt-im-gp); align-items: flex-start; height: auto; .single__bundle__vertical_scroll { display: flex; align-items: flex-start; flex-direction: column; gap: var(--_ctm-lt-im-gp); height: auto; // max-height: var(--_ctm-lt-cr-ht); overflow-y: auto; width: 100%; .vertical_card_wrapper { display: flex; align-items: center; gap: var(--_ctm-lt-ig-tt-sg); padding: 16px; width: 100%; background-color: var(--_ctm-dn-lt-vw-cd-dn-bd-cr); border-width: var(--_ctm-dn-lt-vw-cd-dn-br-wh); border-style: var(--_ctm-dn-lt-vw-cd-dn-br-se); border-color: var(--_ctm-dn-lt-vw-cd-dn-br-cr); border-radius: var(--_ctm-dn-lt-vw-cd-dn-br-rs); box-shadow: var(--_ctm-dn-lt-vw-cd-dn-sw-ae) var(--_ctm-dn-lt-vw-cd-dn-sw-br) var(--_ctm-dn-lt-vw-cd-dn-sw-sd) var(--_ctm-dn-lt-vw-cd-dn-sw-cr); .vertical_card_img_wrapper { height: 100px; width: 90px; img { width: 100% !important; height: 100% !important; } } .product_name { display: flex; flex: 1 0 0; align-items: center; justify-content: flex-start; font-family: var(--_ctm-dn-pt-ne-dn-ft-fy); text-transform: var(--_ctm-dn-pt-ne-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-ne-dn-wd-wp); word-break: var(--_ctm-dn-pt-ne-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-pt-ne-dn-ft-se); color: var(--_ctm-dn-pt-ne-dn-cr); font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt); font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic); text-decoration: var(--_ctm-dn-pt-ne-dn-ue); text-align: var(--_ctm-dn-pt-ne-dn-tt-an); letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg); line-height: var(--_ctm-dn-pt-ne-dn-le-ht); background-color: var(--_ctm-dn-pt-ne-dn-bd-cr); border-width: var(--_ctm-dn-pt-ne-dn-br-wh); border-color: var(--_ctm-dn-pt-ne-dn-br-cr); border-style: var(--_ctm-dn-pt-ne-dn-br-se); border-radius: var(--_ctm-dn-pt-ne-dn-br-rs); box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br) var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr); } } } .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } a { width: 100%; display: flex; align-items: center; .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } } } .single__category_bundle_vertical_scroll_wrapper { display: flex; flex-direction: column; gap: var(--_ctm-lt-im-gp); align-items: flex-start; height: auto; .single__category_bundle__vertical_scroll { display: flex; align-items: flex-start; flex-direction: column; gap: var(--_ctm-lt-im-gp); height: auto; // max-height: var(--_ctm-lt-cr-ht); overflow-y: auto; width: 100%; .category_vertical_card_wrapper { display: flex; align-items: start; flex-direction: column; gap: var(--_ctm-lt-ig-tt-sg); padding: 16px; width: 100%; background-color: var(--_ctm-dn-lt-vw-cd-dn-bd-cr); border-width: var(--_ctm-dn-lt-vw-cd-dn-br-wh); border-style: var(--_ctm-dn-lt-vw-cd-dn-br-se); border-color: var(--_ctm-dn-lt-vw-cd-dn-br-cr); border-radius: var(--_ctm-dn-lt-vw-cd-dn-br-rs); box-shadow: var(--_ctm-dn-lt-vw-cd-dn-sw-ae) var(--_ctm-dn-lt-vw-cd-dn-sw-br) var(--_ctm-dn-lt-vw-cd-dn-sw-sd) var(--_ctm-dn-lt-vw-cd-dn-sw-cr); .vertical_card_img_wrapper { height: 100px; display: flex; gap: 16px; width: 100%; img { width: 90px !important; height: 100% !important; } } .product_name { display: flex; flex: 1 0 0; align-items: center; justify-content: flex-start; font-family: var(--_ctm-dn-pt-ne-dn-ft-fy); text-transform: var(--_ctm-dn-pt-ne-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-ne-dn-wd-wp); word-break: var(--_ctm-dn-pt-ne-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-pt-ne-dn-ft-se); color: var(--_ctm-dn-pt-ne-dn-cr); font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt); font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic); text-decoration: var(--_ctm-dn-pt-ne-dn-ue); text-align: var(--_ctm-dn-pt-ne-dn-tt-an); letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg); line-height: var(--_ctm-dn-pt-ne-dn-le-ht); background-color: var(--_ctm-dn-pt-ne-dn-bd-cr); border-width: var(--_ctm-dn-pt-ne-dn-br-wh); border-color: var(--_ctm-dn-pt-ne-dn-br-cr); border-style: var(--_ctm-dn-pt-ne-dn-br-se); border-radius: var(--_ctm-dn-pt-ne-dn-br-rs); box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br) var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr); } } } .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } a { width: 100%; display: flex; align-items: center; .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } } } .single__bundle__grid_list { .tiles-grid-view { display: flex; flex-wrap: wrap; gap: var(--_ctm-lt-im-sg); .tiles-container { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--_ctm-lt-im-sg); .tile { width: 350px !important; overflow: hidden; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--_ctm-lt-im-gp); justify-content: space-between; background-color: var(--_ctm-dn-te-cd-dn-bd-cr); border-width: var(--_ctm-dn-te-cd-dn-br-wh); border-style: var(--_ctm-dn-te-cd-dn-br-se); border-color: var(--_ctm-dn-te-cd-dn-br-cr); border-radius: var(--_ctm-dn-te-cd-dn-br-rs); box-shadow: var(--_ctm-dn-te-cd-dn-sw-ae) var(--_ctm-dn-te-cd-dn-sw-br) var(--_ctm-dn-te-cd-dn-sw-sd) var(--_ctm-dn-te-cd-dn-sw-cr); .tile-content { display: flex; flex-direction: column; gap: var(--_ctm-lt-ig-tt-sg); align-items: flex-start; height: 100%; width: 100%; .tile_bundle_name { display: flex; align-items: flex-start; justify-content: flex-start; font-family: var(--_ctm-dn-pt-ne-dn-ft-fy); text-transform: var(--_ctm-dn-pt-ne-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-ne-dn-wd-wp); word-break: var(--_ctm-dn-pt-ne-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-pt-ne-dn-ft-se); color: var(--_ctm-dn-pt-ne-dn-cr); font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt); font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic); text-decoration: var(--_ctm-dn-pt-ne-dn-ue); text-align: var(--_ctm-dn-pt-ne-dn-tt-an); letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg); line-height: var(--_ctm-dn-pt-ne-dn-le-ht); background-color: var(--_ctm-dn-pt-ne-dn-bd-cr); border-width: var(--_ctm-dn-pt-ne-dn-br-wh); border-color: var(--_ctm-dn-pt-ne-dn-br-cr); border-style: var(--_ctm-dn-pt-ne-dn-br-se); border-radius: var(--_ctm-dn-pt-ne-dn-br-rs); box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br) var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr); } .brand-tile { display: flex; justify-content: center; align-items: center; height: -webkit-fill-available; img { width: 100%; height: 100%; object-fit: contain; } } .product-tile { display: grid; flex: 1 1 auto; row-gap: var(--_ctm-lt-te-rw-gp); column-gap: var(--_ctm-lt-te-cn-gp); padding: 10px; box-sizing: border-box; width: 100%; &.images-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } &.images-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } &.images-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; .product-image-wrapper:last-child { grid-column: 1 / -1; // span both columns } } &.images-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } &.animate-flip { .product-image-wrapper { animation: flip 0.6s ease-in-out; } @keyframes flip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } } } .product-image-wrapper { width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: var(--_ctm-dn-te-cd-ie-dn-bd-cr); border-width: var(--_ctm-dn-te-cd-ie-dn-br-wh); border-color: var(--_ctm-dn-te-cd-ie-dn-br-cr); border-style: var(--_ctm-dn-te-cd-ie-dn-br-se); border-radius: var(--_ctm-dn-te-cd-ie-dn-br-rs); box-shadow: var(--_ctm-dn-te-cd-ie-dn-sw-ae) var(--_ctm-dn-te-cd-ie-dn-sw-br) var(--_ctm-dn-te-cd-ie-dn-sw-sd) var(--_ctm-dn-te-cd-ie-dn-sw-cr); img { max-height: 135px; } } } } .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } a { display: flex; align-items: center; width: 100%; .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; text-transform: uppercase; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } } } } } } .single__bundle__category_grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_ctm-lt-im-sg); .category_bundle_wrapper { display: flex; flex-direction: column; align-items: flex-start; width: 350px; align-self: stretch; padding: 16px; gap: var(--_ctm-lt-ig-tt-sg); background-color: var(--_ctm-dn-te-cd-dn-bd-cr); border-width: var(--_ctm-dn-te-cd-dn-br-wh); border-style: var(--_ctm-dn-te-cd-dn-br-se); border-color: var(--_ctm-dn-te-cd-dn-br-cr); border-radius: var(--_ctm-dn-te-cd-dn-br-rs); box-shadow: var(--_ctm-dn-te-cd-dn-sw-ae) var(--_ctm-dn-te-cd-dn-sw-br) var(--_ctm-dn-te-cd-dn-sw-sd) var(--_ctm-dn-te-cd-dn-sw-cr); .category_bundle_heading_wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; .category_bundle_name { display: flex; align-items: flex-start; justify-content: flex-start; font-family: var(--_ctm-dn-pt-ne-dn-ft-fy); text-transform: var(--_ctm-dn-pt-ne-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-ne-dn-wd-wp); word-break: var(--_ctm-dn-pt-ne-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-pt-ne-dn-ft-se); color: var(--_ctm-dn-pt-ne-dn-cr); font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt); font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic); text-decoration: var(--_ctm-dn-pt-ne-dn-ue); text-align: var(--_ctm-dn-pt-ne-dn-tt-an); letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg); line-height: var(--_ctm-dn-pt-ne-dn-le-ht); background-color: var(--_ctm-dn-pt-ne-dn-bd-cr); border-width: var(--_ctm-dn-pt-ne-dn-br-wh); border-color: var(--_ctm-dn-pt-ne-dn-br-cr); border-style: var(--_ctm-dn-pt-ne-dn-br-se); border-radius: var(--_ctm-dn-pt-ne-dn-br-rs); box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br) var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr); } } .category-tile-content { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; width: 100%; .category-tile { display: grid; row-gap: var(--_ctm-lt-te-rw-gp); column-gap: var(--_ctm-lt-te-cn-gp); padding: 10px; box-sizing: border-box; height: 100%; .category-product-image-wrapper { width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: var(--_ctm-dn-te-cd-ie-dn-bd-cr); border-width: var(--_ctm-dn-te-cd-ie-dn-br-wh); border-color: var(--_ctm-dn-te-cd-ie-dn-br-cr); border-style: var(--_ctm-dn-te-cd-ie-dn-br-se); border-radius: var(--_ctm-dn-te-cd-ie-dn-br-rs); box-shadow: var(--_ctm-dn-te-cd-ie-dn-sw-ae) var(--_ctm-dn-te-cd-ie-dn-sw-br) var(--_ctm-dn-te-cd-ie-dn-sw-sd) var(--_ctm-dn-te-cd-ie-dn-sw-cr); img { max-height: 135px; } } &.images-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } &.images-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } &.images-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; .product-image-wrapper:last-child { grid-column: 1 / -1; // span both columns } } &.images-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } } } .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } a { display: flex; align-items: center; width: 100%; .bundle_navigation_button { width: 100%; display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy); text-transform: var(--_ctm-dn-be-nn-bn-dn-tt-tm); word-wrap: var(--_ctm-dn-be-nn-bn-dn-wd-wp); word-break: var(--_ctm-dn-be-nn-bn-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se); color: var(--_ctm-dn-be-nn-bn-dn-cr); font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt); font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue); text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an); letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg); line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht); background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr); border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh); border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr); border-style: var(--_ctm-dn-be-nn-bn-dn-br-se); border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs); box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br) var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr); .icon { svg { width: var(--_ctm-dn-be-nn-bn-dn-in-se); height: var(--_ctm-dn-be-nn-bn-dn-in-se); path { stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25); } } } } } } } } .arrow-navigation { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .multi__bundle_container { .bundle_name_slider { .embla__container { grid-template-columns: max-content !important; grid-auto-columns: max-content !important; .embla__slide { width: max-content !important; } } } .bundle-name-container { display: flex; flex-direction: column; cursor: pointer; .bundle_name__tag { display: flex; padding: 10px; font-family: var(--_ctm-dn-be-tg-dn-ft-fy); text-transform: var(--_ctm-dn-be-tg-dn-tt-tm); word-wrap: var(--_ctm-dn-be-tg-dn-wd-wp); word-break: var(--_ctm-dn-be-tg-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-be-tg-dn-ft-se); color: var(--_ctm-dn-be-tg-dn-cr); font-weight: var(--_ctm-dn-be-tg-dn-ft-wt); font-style: var(--_ctm-dn-be-tg-dn-ft-se-ic); text-decoration: var(--_ctm-dn-be-tg-dn-ue); text-align: var(--_ctm-dn-be-tg-dn-tt-an); letter-spacing: var(--_ctm-dn-be-tg-dn-lr-sg); line-height: var(--_ctm-dn-be-tg-dn-le-ht); background-color: var(--_ctm-dn-be-tg-dn-bd-cr); border-width: var(--_ctm-dn-be-tg-dn-br-wh); border-color: var(--_ctm-dn-be-tg-dn-br-cr); border-style: var(--_ctm-dn-be-tg-dn-br-se); border-radius: var(--_ctm-dn-be-tg-dn-br-rs); box-shadow: var(--_ctm-dn-be-tg-dn-sw-ae) var(--_ctm-dn-be-tg-dn-sw-br) var(--_ctm-dn-be-tg-dn-sw-sd) var(--_ctm-dn-be-tg-dn-sw-cr); &.active { font-weight: bold; } } } .single__bundle__grid_list { display: flex; flex-wrap: wrap; gap: var(--_ctm-lt-im-sg); } } } .embla { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; // overflow: hidden; .embla__viewport { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; .embla__container { width: 100%; height: 100%; display: grid; grid-template-rows: 100%; grid-template-columns: repeat( var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))), calc( 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))) ) ); grid-auto-flow: column; gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))); &[data-control-type="Bottom"][data-slider-control="Arrows"] { height: calc( 100% - calc( var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ) + 10px ) ); } &[data-control-type="Bottom"][data-slider-control="Pagination Line"] { height: calc( 100% - calc( var( --_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)) ) + 20px ) ); } &[data-control-type="Bottom"][data-slider-control="Dots"] { height: calc( 100% - calc( var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ) + 20px ) ); } .embla__slide { width: 100%; height: 100%; } } } &:not([data-display-style="Column"]) { .embla__container { grid-auto-columns: calc( 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))) ); } } &[data-display-style="Grid"][data-scroll-direction="Vertical"] { // overflow: unset; .embla__viewport { overflow: unset; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); } .embla__container { overflow: unset; height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr); grid-template-rows: unset; grid-auto-flow: row; &[data-overflow-hidden="true"] { overflow: hidden; } } } } &[data-display-style="Grid"][data-scroll-direction="Horizontal"] { .embla__viewport { .embla__container { grid-template-rows: repeat( var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))), calc( 100% / var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))) ) ); } } } &[data-display-style="Rows"] { // overflow: unset; .embla__viewport { overflow: unset; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-height); } .embla__container { overflow: hidden; height: var(--_ctm-height); // min-height: var(--_ctm-height); grid-template-columns: repeat( var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))), 1fr ); grid-template-rows: unset; grid-auto-flow: row; } } } &[data-display-style="Column"] { // overflow: unset; .embla__viewport { .embla__container { display: flex; .embla__slide { width: unset; height: 100%; aspect-ratio: 1 / 2; } } } } &[data-display-style="Masonry"] { // overflow: unset; .embla__viewport { overflow: hidden; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-height); } .embla__container { overflow: unset; display: block; column-count: var( --_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw)) ); gap: unset; column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))); height: auto; .embla__slide { margin-bottom: var( --_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)) ); height: unset; .gallery__slide { height: unset; } } } } } .arrow-navigation { display: flex; position: absolute; top: 50%; left: 50%; width: 100%; justify-content: space-between; transform: translate(-50%, -50%); // padding-left: 20px; &[data-control-type="Side"] { .left-button, .right-button { background-color: transparent; } } &[data-background-shape="Round"] { .left-button, .right-button { background-color: #f2f5f5; box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1); } } &[data-control-type="Bottom-Overflow"] { transform: translateX(-50%); width: 100%; justify-content: center; gap: 12px; top: unset; bottom: 6px; } &[data-control-type="Bottom"] { transform: unset; position: static; width: 100%; justify-content: center; gap: 12px; margin-top: 10px; } .left-button { padding: 10px; border-radius: 50%; border: none; width: var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ); height: var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ); display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; margin-left: 12px; &:disabled { & svg { path { stroke: rgb(192, 192, 192); } } } } .right-button { border-radius: 50%; border: none; width: var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ); height: var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ); display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; margin-right: 12px; padding: 10px; &:disabled { & svg { path { stroke: rgb(192, 192, 192); } } } } .icon { display: flex; svg { width: calc( var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ) * 0.5 ); height: calc( var( --_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)) ) * 0.5 ); path { stroke: var( --_ctm-mob-dn-pn-as-aw-cr, var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)) ); } } } } &[data-control-type="Side"] { .embla__viewport { width: calc(100% - 120px); margin-inline: auto; } .left-button { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .right-button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } &[data-thumbnail-placement="top"] { flex-direction: column-reverse; } &[data-thumbnail-placement="bottom"] { flex-direction: column; } &[data-thumbnail-placement="left"] { flex-direction: row-reverse; .embla__thumbs { width: var(--_ctm-lt-tl-se); height: 100%; & .embla__thumbs__container { flex-direction: column; height: 100%; } } } &[data-thumbnail-placement="right"] { flex-direction: row; .embla__thumbs { width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); height: 100%; & .embla__thumbs__container { flex-direction: column; height: 100%; } } } .embla__dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-right: calc((2.6rem - 1.4rem) / 2 * -1); gap: 6px; &[data-control-type="Bottom-Overflow"] { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 75%; } .embla__dot { -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5); -webkit-appearance: none; appearance: none; background-color: var( --_ctm-mob-dn-pn-ds-or-dt-cr, var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)) ); touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; // width: 0.6rem; // height: 0.6rem; width: var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ); height: var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ); display: flex; align-items: center; justify-content: center; border-radius: 50%; } .embla__dot:after { // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast); width: var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ); height: var( --_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)) ); border-radius: 50%; display: flex; align-items: center; content: ""; } .embla__dot--selected:after { box-shadow: inset 0 0 0 1px var(--text-body); background-color: var( --_ctm-mob-dn-pn-ds-ct-dt-cr, var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)) ); } &[data-slider-control="Pagination Line"] { .embla__dot { width: var( --_ctm-mob-dn-pn-le-le-wh, var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)) ); height: var( --_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)) ); background-color: var( --_ctm-mob-dn-pn-le-or-le-cr, var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)) ); border-radius: 6px; } .embla__dot--selected:after { box-shadow: inset 0 0 0 1px var(--text-body); border-radius: 6px; width: var( --_ctm-mob-dn-pn-le-le-wh, var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)) ); height: var( --_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)) ); background-color: var( --_ctm-mob-dn-pn-le-ct-le-cr, var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)) ); } } } .embla__thumbs { width: 100%; height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; // margin: 10px; padding: 10px; .embla__thumbs__viewport { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; } .embla__thumbs__container { display: flex; flex-direction: row; margin-left: calc(var(--thumbs-slide-spacing) * -1); gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg))); width: 100%; // justify-content: center; // height: 200px; .embla__thumbs__slide { min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); & img { width: 100%; height: 100%; } } } } } } }